<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @text="textfn" :arr="list"></TodoHeader>
    <TodoMain :arr="showarr" @str="splicefn"></TodoMain>
    <TodoFooter :list='this.showarr' @chengtype='typefn' @clear='clearfn'></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {//getItem取
         list: JSON.parse(localStorage.getItem('todoList')) || [],
       
      getSel:'all'//默认显示全部
    };
  },
  methods: {
    textfn(uanme) {
      let id = this.list.length === 0 ? 100 : this.list.at(-1).id + 1;

      this.list.push({
        id: id,
        name: uanme,
        isDone: false,
      });
    },
    splicefn(id) {
      let index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);
    },
    typefn(str){
      this.getSel=str
    },
    clearfn(){//清空已完成的  留下未完成的 filter==fales 留下未完成的
      this.list=this.list.filter(item=>item.isDone==false)
    }
  },
  //定义一个数组showarr数组-通过list配合条件筛选而来  之前传的原数组 现状是通过计算属性更改后的数组
  computed:{
showarr(){
  if( this.getSel==='yes'){//显示已完成的
   return  this.list.filter(item=>item.isDone===true)
  } 
  else if(this.getSel==='no'){//显示为完成的
      return  this.list.filter(item=>item.isDone===false)
  }
  else{ 
    return this.list//全部显示
  }
}
  },
  //数组缓存
  watch: {
            list: {
                deep: true,
                handler(){
                    // 8.0 只要list变化 - 覆盖式保存到localStorage里  setItem存
                    localStorage.setItem('todoList', JSON.stringify(this.list))
                }
            }
        }
};
</script>